<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./css/reset.css">
	<title>Document</title>
</head>
<style>
	.item{
		width: 50px;
		height:50px;
		border: 4px solid #000;
		position: absolute;
		box-sizing: border-box;
		border-radius: 50%;

	}

	.circle1{
		left: 0px;
		top: 0px;
	}

	.circle2{
		left: 35px;
		top: 0px;
	}

	.circle3{
		left: 70px;
		top: 0px;
	}

	.circle4{
		left: 105px;
		top: 0px;
	}

	.banner{

		width: 520px;
		height: 304px;
		border: 2px solid;
		/* box-sizing: border-box; */
		margin: 1em auto;
		overflow: hidden;

	}

	.banner .imgs{
		width: 1560px;
		height: 304px;


	}

	.banner .imgs img{
		width: 520px;
		height: 304px;

	}

	.banner .imgs a{

		float: left;
	}

</style>
<body>
	<div>	
		<div class="banner">
			<div class="imgs">
				<a href=""><img src="./img/1.jpeg" alt=""></a>
				<a href=""><img src="./img/2.jpeg" alt=""></a>
				<a href=""><img src="./img/3.jpeg" alt=""></a>

			</div>
			
		</div>
			

	</div>
</body>
</html>
